{% extends "/layouts/layouts.twig" %}
{% block head %}
    <script src="/bower_components/jquery.marquee/jquery.marquee.js" type="text/javascript"></script>
    <link rel="stylesheet/less" href="/assets/less/hangqing.less">
    <link rel="stylesheet" href="/assets/css/gongsi.css">
{% endblock %}
{% block content %}
    <div class="main">
        <div class="row">
            <div class="col-xl-9" >
                {% for i in h1 %}
                    <div class="h1div">
                        <strong style="color:{{ i.color }}">
                            <h1>{{ i.name }}</h1>
                        </strong>
                    </div>
                {% endfor %}
                {% for z in divli %}
                <div class="hangqingli">
                    <div class="top">
                       <strong><p class="titleleft" style="color: {{ z.titlecolor }}">{{ z.title }}</p></strong>
                        <p class="titleright">{{ z.more }}</p>
                    </div>
                    {% for k in z.cate %}
                    <div class="bottom">
                        <p class="bottomleft" style="color: {{ k.color }}">{{ k.neirong }}</p>
                        <p class="bottomright">{{ k.data }}</p>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
            <div class="col-xl-3">
                <div class="gundong">
                    <div class="scroll-box">
                        <ul>

                                {% for i in scroll %}
                                 <li>
                                     <table>
                                         <tr>
                                             <td>{{ i.name }}</td>
                                             <td>{{ i.money }}</td>
                                             <td>{{ i.number }}</td>
                                             <td>{{ i.zhongliang }}</td>
                                         </tr>
                                     </table>

                                 </li>
                                {% endfor %}

                        </ul>
                    </div>
                </div>
                {% for z in divright %}
                    <div class="chanpingli">
                        <div class="top">
                            <strong><p class="titleleft" style="color: {{ z.titlecolor }}">{{ z.title }}</p></strong>
                            <p class="titleright">{{ z.more }}</p>
                        </div>
                        {% for k in z.cate %}
                            <div class="bottom">
                              <a href="">
                                  <p class="bottomleft" style="color: {{ k.color }}">{{ k.neirong }}</p>
                              </a>
                                <p class="bottomright">{{ k.data }}</p>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <script>
        $(function() {
            //获得当前<ul>
            var $uList = $(".scroll-box ul");
            var timer = null;
            //触摸清空定时器
            $uList.hover(function() {
                    clearInterval(timer);
                },
                function() { //离开启动定时器
                    timer = setInterval(function() {
                        scrollList($uList);
                    }, 1000);
                }).trigger("mouseleave"); //自动触发触摸事件
            //滚动动画
            function scrollList(obj) {
                //获得当前<li>的高度
                var scrollHeight = $("ul li:first").height();
                //滚动出一个<li>的高度
                $uList.stop().animate({
                        marginTop: -scrollHeight
                    }, 600,
                    function() {
                        //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
                        $uList.css({
                            marginTop: 0
                        }).find("li:first").appendTo($uList);
                    });
            }
        });
    </script>
{% endblock %}